'use client'

import React, { useState } from 'react'
import { Form, Input, Button, Card, message, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { handleApiError, showSuccess } from '../utils/errorHandler'

export default function LoginForm({ onSuccess, onSwitchToRegister }) {
    const [form] = Form.useForm()
    const [loading, setLoading] = useState(false)

    // 处理表单提交
    const handleSubmit = async (values) => {
        setLoading(true)

        try {
            // 调用登录 API
            const response = await fetch('/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: values.username,
                    password: values.password
                })
            })

            const result = await response.json()

            if (!response.ok) {
                throw new Error(result.message || '登录失败')
            }

            showSuccess('登录成功！')
            form.resetFields()

            if (onSuccess) {
                onSuccess(result.user)
            }

        } catch (error) {
            console.error('Login error:', error)
            handleApiError(error, '登录失败')
        } finally {
            setLoading(false)
        }
    }

    return (
        <Card
            title="用户登录"
            className="max-w-md mx-auto"
            extra={
                onSwitchToRegister && (
                    <Button type="link" onClick={onSwitchToRegister}>
                        没有账户？立即注册
                    </Button>
                )
            }
        >
            <Form
                form={form}
                layout="vertical"
                onFinish={handleSubmit}
                className="space-y-4"
            >
                <Form.Item
                    name="username"
                    label="用户名或邮箱"
                    rules={[
                        { required: true, message: '请输入用户名或邮箱' }
                    ]}
                >
                    <Input
                        prefix={<UserOutlined />}
                        placeholder="请输入用户名或邮箱"
                        size="large"
                    />
                </Form.Item>

                <Form.Item
                    name="password"
                    label="密码"
                    rules={[
                        { required: true, message: '请输入密码' }
                    ]}
                >
                    <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="请输入密码"
                        size="large"
                    />
                </Form.Item>

                <Form.Item name="remember" valuePropName="checked">
                    <Checkbox>记住我</Checkbox>
                </Form.Item>

                <Form.Item className="mb-0">
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={loading}
                        size="large"
                        block
                        className="h-12"
                    >
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    )
}